<script lang="ts" setup>
import { Close } from '@element-plus/icons-vue'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue'
import Authentication from '@/components/Authentication/index.vue'
import { checkUpdate } from '@/utils/versionCheck'
import { usePhoneStore } from '@/store/modules/phone'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { emitter } from '@/utils/eventBus.ts'
import MenuBox from '@/views/call/Ai_call/components/menu.vue'

defineOptions({ name: 'APP' })

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const { wsCache } = useCache()
const crmSpec = ref(null)
const aiSpec = ref(null)

// 根据浏览器当前主题设置系统主题色
// const setDefaultTheme = () => {
// let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
// if (isDarkTheme === null) {
//   isDarkTheme = isDark()
// }
// appStore.setIsDark(isDarkTheme)
// }
// setDefaultTheme()

const useStore = usePhoneStore()

const timer = ref(null)
/**定时器刷新版本*/
const refreshVersion = () => {
  if (!timer.value) {
    timer.value = setInterval(() => {
      checkUpdate()
    }, 15e3)
  }
}

const onceShow = ref(false)
const router = useRouter()
const route = useRoute()
onMounted(async () => {
  // 通过代码强制请求使用麦克风
  if (
    navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia &&
    route.path != '/mp_official'
  ) {
    await navigator.mediaDevices.getUserMedia({ audio: true })
  }
  refreshVersion()
  // 通过代码请求浏览器发送通知
  await Notification.requestPermission()
})
const urlPath = computed(() => {
  return (
    route.path != '/pageH5' &&
    route.path != '/wxDetail' &&
    route.path != '/mp_official' &&
    route.path != '/login'
  )
})
onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value)
})
/*认证提示*/
const open = () => {
  let userInfo = wsCache.get(CACHE_KEY.USER)
  if (userInfo && userInfo.tenantInfo.authType == 2 && sessionStorage.getItem('onces') == 1) {
    onceShow.value = true
  } else {
    onceShow.value = false
  }
}
const authen = ref(null)
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    if (newValue.path == '/index') {
      open()
    }
  },
  { immediate: true }
)
emitter.on('SetDialog', (val) => {
  if (val) {
    if (val.clue.length == 0 && val.customer.length == 0) {
      crmSpec.value.setDrawer(true, 'other', val.number, val.list)
    } else if (val.clue.length) {
      crmSpec.value.setDrawer(true, 'clue', val.clue[0], val.clue)
    } else if (val.customer.length) {
      crmSpec.value.setDrawer(true, 'customer', val.customer[0], val.customer)
    }
  }
})
emitter.on('aiDialog', (val) => {
  aiSpec.value.setAiDrawer(val)
})
const closeOnce = () => {
  onceShow.value = false
  sessionStorage.setItem('onces', 2)
}
/*认证*/
const authentication = () => {
  closeOnce()
  authen.value.open()
}
</script>
<template>
  <Authentication ref="authen" />
  <div class="onces-message" v-if="onceShow">
    <span
      >您当前使用的是“个人版”，部分接口不可用，请完成【
      <span style="color: #0052cc; margin-bottom: 6px; cursor: pointer" @click="authentication"
        >企业认证</span
      >
      】解锁全部功能</span
    >
    <el-icon
      class="play-voice"
      style="margin-left: 10px; cursor: pointer"
      color="#333"
      size="16"
      @click="closeOnce"
    >
      <Close />
    </el-icon>
  </div>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    <routerSearch />
  </ConfigGlobal>
  <audio id="remoteAudio" autoPlay></audio>
  <CrmSpec ref="crmSpec"> </CrmSpec>
  <AiSpec ref="aiSpec"></AiSpec>
  <MenuBox v-if="urlPath" />
</template>
<style lang="scss">
.onces-message {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 40px;
  background: #fcfff4;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 6px 2px;
  z-index: 9999;
  color: #172b4d;
  font-size: 14px;
  font-weight: bold;
}
$prefix-cls: #{$namespace}-app;

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  @extend .size;

  padding: 0 !important;
  margin: 0;
  overflow: hidden;

  #app {
    @extend .size;
  }
}

.#{$prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style>
